<template>
  <kk-relative class="Page W">
    <kk-text class="T1" val="App 容器" />
    <div class="F2" />
    <kk-text class="T2" val="此组件仅仅用于替换 App.vue 中的内容，并且添加公共 CSS" />
    <div class="F2" />
    <kk-text class="T2" val="请将 App.vue 中的内容改写成如下" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="template" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-app" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <div class="SpaceBox" />
        <div class="SpaceBox" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="router-view" />
        <kk-text class="Black Space" val="/&gt;" />
        <div class="F2" />
        <div class="SpaceBox" />
        <kk-text class="Black" val="&lt;/" />
        <kk-text class="Blues" val="kk-app" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;/" />
        <kk-text class="Blues" val="template" />
        <kk-text class="Black" val="&gt;" />
      </div>
    </div>
    <div class="F2" />
    <kk-text class="T2" val="此组件会向 #app 中添加行内样式，请注意样式冲突，添加的样式如下" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Blues" val="height:" />
        <kk-text class="Greens Space" val="100%" />
        <div class="F2" />
        <kk-text class="Blues" val="width:" />
        <kk-text class="Greens Space" val="100%" />
        <div class="F2" />
        <kk-text class="Blues" val="display:" />
        <kk-text class="Orange Space" val="block" />
        <div class="F2" />
        <kk-text class="Blues" val="position:" />
        <kk-text class="Orange Space" val="relative" />
        <div class="F2" />
        <kk-text class="Blues" val="font-size:" />
        <kk-text class="Greens Space" val="0vw" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="模板修改" />
    <div class="F2" />
    <kk-text class="T2" val="页面挂载前修改 <html> 和 <body> 的行内样式，添加的样式如下" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Blues" val="height:" />
        <kk-text class="Greens Space" val="100%" />
        <div class="F2" />
        <kk-text class="Blues" val="width:" />
        <kk-text class="Greens Space" val="100%" />
        <div class="F2" />
        <kk-text class="Blues" val="margin:" />
        <kk-text class="Greens Space" val="0vw" />
        <div class="F2" />
        <kk-text class="Blues" val="padding:" />
        <kk-text class="Greens Space" val="0vw" />
        <div class="F2" />
        <kk-text class="Blues" val="display:" />
        <kk-text class="Orange Space" val="block" />
        <div class="F2" />
        <kk-text class="Blues" val="position:" />
        <kk-text class="Orange Space" val="relative" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="公共颜色" />
    <div class="F2" />
    <kk-text class="T2" val="页面挂载前添加，具体参考 [颜色] 内容说明" />

    <div class="F1" />

    <kk-text class="T1" val="公共样式" />
    <div class="F2" />
    <kk-text class="T2" val="页面挂载前添加，添加的样式如下" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Orange" val="::-webkit-scrollbar" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="display:" />
        <kk-text class="Orange Space" val="none" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 消除浏览器滚动条 */" />
        <div class="F2" />
        <kk-text class="Orange" val=".HW" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="height:" />
        <kk-text class="Greens Space" val="100%" />
        <kk-text class="Black" val=";" />
        <kk-text class="Blues Space" val="width:" />
        <kk-text class="Greens Space" val="100%" />
        <kk-text class="Black" val=";" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 宽高 100% */" />
        <div class="F2" />
        <kk-text class="Orange" val=".H" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="height:" />
        <kk-text class="Greens Space" val="100%" />
        <kk-text class="Black" val=";" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 高度 100% */" />
        <div class="F2" />
        <kk-text class="Orange" val=".W" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="height:" />
        <kk-text class="Greens Space" val="100%" />
        <kk-text class="Black" val=";" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 宽度 100% */" />
        <div class="F2" />
        <kk-text class="Orange" val=".FL" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="float:" />
        <kk-text class="Orange Space" val="left" />
        <kk-text class="Black" val=";" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 左浮动 */" />
        <div class="F2" />
        <kk-text class="Orange" val=".FR" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="float:" />
        <kk-text class="Orange Space" val="right" />
        <kk-text class="Black" val=";" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 右浮动 */" />
        <div class="F2" />
        <kk-text class="Orange" val=".TAL" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="float:" />
        <kk-text class="Orange Space" val="left" />
        <kk-text class="Black" val=";" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 文本靠左 */" />
        <div class="F2" />
        <kk-text class="Orange" val=".TAC" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="float:" />
        <kk-text class="Orange Space" val="center" />
        <kk-text class="Black" val=";" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 文本居中 */" />
        <div class="F2" />
        <kk-text class="Orange" val=".TAR" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="float:" />
        <kk-text class="Orange Space" val="right" />
        <kk-text class="Black" val=";" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 文本靠右 */" />
        <div class="F2" />
        <kk-text class="Orange" val="*" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="box-sizing:" />
        <kk-text class="Orange Space" val="border-box" />
        <kk-text class="Black" val=";" />
        <kk-text class="Blues Space" val="line-height:" />
        <kk-text class="Green Space" val="1" />
        <kk-text class="Black" val=";" />
        <kk-text class="Blues Space" val="min-width:" />
        <kk-text class="Green Space" val="0vw" />
        <kk-text class="Black" val=";" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 全局 */" />
        <div class="F2" />
        <kk-text class="Orange" val=".ND" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="user-select:" />
        <kk-text class="Orange Space" val="none" />
        <kk-text class="Black" val=";" />
        <kk-text class="Blues Space" val="cursor:" />
        <kk-text class="Orange Space" val="default" />
        <kk-text class="Black" val=";" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 鼠标无法选中状态 */" />
        <div class="F2" />
        <kk-text class="Orange" val=".NP" />
        <kk-text class="Black Space" val="{" />
        <kk-text class="Blues Space" val="user-select:" />
        <kk-text class="Orange Space" val="none" />
        <kk-text class="Black" val=";" />
        <kk-text class="Blues Space" val="cursor:" />
        <kk-text class="Orange Space" val="pointer" />
        <kk-text class="Black" val=";" />
        <kk-text class="Black Space" val="}" />
        <kk-text class="Green Space" val="/* 鼠标点击状态状态 */" />
      </div>
    </div>
  </kk-relative>
</template>